<!DOCTYPE html>


<html>
<head>
  <meta charset="UTF-8">
  <title>智能鱼缸系统</title>
  <style>
    h1{
      color:#ff8eb3;
   text-align:center;
font-size: 70px;

    }
    h2{
      color:green;
      font-size: 50px;


    }
    span{
      
      font-size: 35px;


    }
   

        .af {
            width: 400px;
            height: 200px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            display: inline-block;
            margin: 20px;
            text-align: center;
            font-size: 50px;
            color: #fff;
            background: #ff8eb3;
            margin: 0 100px;
            margin-top: 150px;
        }
        /*.af:hover{
            opacity: 0.8;
        }*/
        .title {
            font-size: 60px;
            color: #ff8eb3;
            margin-bottom: 30px;
        }

        #inp {
            width: 100%;
            height: 100px;
            font-size: 50px;
            margin-top: 100px;
            border-top: none;
            border-left: none;
            border-right: none;
            border-bottom: 3px solid #ff8eb3;
            color: #ff8eb3;
        }
  #touch {
	width: 60px;
	height: 60px;
	position: absolute;
	left: 300px;
	top: 79px;
	margin-left: -30px;
	margin-top: -30px;
	z-index: 999999;
}




#simple-menu {
	width: 60px;
	height: 60px;
	cursor: move;
}
  </style>
  <style lang="scss" scoped>

    .wave-mask {
        position: absolute;
        width: 200px;
        height: 200px;
        top: 10px;
        left: 55%;
        border-radius: 40%;
        background-color: rgba(212, 24, 24, 0.9);
        transform: translate(-50%, -70%) rotate(0);
        animation: toRotate 10s linear -5s infinite;
        z-index: 20;
    }

    @keyframes toRotate {
        50% {
            transform: translate(-50%, -70%) rotate(180deg);
        }

        100% {
            transform: translate(-50%, -70%) rotate(360deg);
        }
    }

    .container {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        border: 3px solid #67c23a;
        background: #ffffff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 5px;
    }

    .wave {
        position: relative;
        width: 100px;
        height: 100px;
        background-image: linear-gradient(-180deg, #aaff80 13%, #67c23a 91%);
        border-radius: 50%;
    }

    .container {
        overflow: hidden;
    }

    .wave-mask {
        background-color: rgba(255, 255, 255, 0.9);
    }
</style>



</head>

<body>
<h1>智能鱼缸管理系统</h1>
<h2>系统状态</h2>
<span>水位：</span>     <span id="sy">正在获取</span>
<p></p>
<span>温度：</span>     <span id="wd">正在获取</span>
<p></p>
<span>供料：</span>     <span id="gl">正在获取</span>
<p></p>
<span>水循环：</span>   <span id="sxh">正在获取</span>
<p></p>
<span>灯光：</span>     <span id="dg">正在获取</span>
<p></p>
<span>喂食情况：</span> <span id="wsqk">正在获取</span>
<h2>手动操作</h2>
<input class="af" type="button" value="手动喂食" onclick="opera('sdws')">
<input class="af" type="button" value="灯光" onclick="opera('light')">
<input class="af" type="button" value="水循环" onclick="opera('sxhs')">


<!-- 代码开始 -->
<div id="touch" class=" visible-xs-block" style="width: 200px; height: 200px; position: absolute;">

  <div class="container">
    <div class="container">
        <div class="wave"></div>
        <div id="xfq" class="wave-mask"></div>
    </div>

</div>
</div>
















<script>
  var div = document.getElementById('touch');
   
   var viewWidth = window.screen.width;
   var viewHeight = window.screen.height;
   var divWidth = div.style.width;
   var divHeight = div.style.height;
 //  alert(viewWidth + "---" + viewHeight);
  div.addEventListener('touchmove' ,function(event) {
  event.preventDefault();//阻止其他事件
  // 如果这个元素的位置内只有一个手指的话
  if (event.targetTouches.length == 1) {
   var touch = event.targetTouches[0];  // 把元素放在手指所在的位置
   console.log(touch.pageX + "---" + viewWidth + "," +touch.pageY + "---" +viewHeight);
   var tempWidth = touch.pageX;
   var tempHeigth = touch.pageY ;
   if((touch.pageX + divWidth) > viewWidth){
		tempWidth = viewWidth - divWidth;
   }
   if((touch.pageY + divHeight) > viewHeight){
	    tempHeigth = viewHeight - divHeight;
   }
   div.style.left =  tempWidth  + 'px';
   div.style.top = tempHeigth + 'px';
   div.style.background = "";
   }
  }, false);




  var int=self.setInterval("clock()",10000);
            function clock()
            {
                s();
                ss();
                sss();
                ssss();
                sssss();
                ssssss();

            }





            function s(){
                var xmlhttp;
                    if (window.XMLHttpRequest) {
                        xmlhttp = new XMLHttpRequest();
                    }
                    xmlhttp.onreadystatechange = function () {
                        if ( xmlhttp.status == 200){
                           
                            document.getElementById("sy").innerHTML = xmlhttp.responseText+"%";
                         
                           
                         
                            document.getElementById("xfq").style.top=40-parseInt(xmlhttp.responseText) +"px";

                        }
                    }
                
                    xmlhttp.open("GET", "/sjhq?sjhq=" +"sy");
                    xmlhttp.send();
                }
                function ss(){
                var xmlhttp;
                    if (window.XMLHttpRequest) {
                        xmlhttp = new XMLHttpRequest();
                    }
                    xmlhttp.onreadystatechange = function () {
                        if ( xmlhttp.status == 200){
                            
                          
                          
                            document.getElementById("wd").innerHTML = xmlhttp.responseText+"℃";
                        }
                    }
                
                    xmlhttp.open("GET", "/sjhq?sjhq=" +"wd");
                    xmlhttp.send();
                }
                function sss(){
                var xmlhttp;
                    if (window.XMLHttpRequest) {
                        xmlhttp = new XMLHttpRequest();
                    }
                    xmlhttp.onreadystatechange = function () {
                        if ( xmlhttp.status == 200){

                            if(xmlhttp.responseText=="1"){

                        document.getElementById("gl").innerHTML = "供料不足"
                            }else{

                                document.getElementById("gl").innerHTML = "供料充足"
                            }


                           // document.getElementById("gl").innerHTML = xmlhttp.responseText;
                        }
                    }
                
                    xmlhttp.open("GET", "/sjhq?sjhq=" +"gl");
                    xmlhttp.send();
                }
                function ssss(){
                var xmlhttp;
                    if (window.XMLHttpRequest) {
                        xmlhttp = new XMLHttpRequest();
                    }
                    xmlhttp.onreadystatechange = function () {
                        if ( xmlhttp.status == 200){
                           
                           
                            if(xmlhttp.responseText=="1"){

                        document.getElementById("sxh").innerHTML = "开启"
                                         }else{

                          document.getElementById("sxh").innerHTML = "关闭"
                                                             }
                           
                           
                          //  document.getElementById("sxh").innerHTML = xmlhttp.responseText;
                        }
                    }
                
                    xmlhttp.open("GET", "/sjhq?sjhq=" +"sxh");
                    xmlhttp.send();
                }
                function sssss(){
                var xmlhttp;
                    if (window.XMLHttpRequest) {
                        xmlhttp = new XMLHttpRequest();
                    }
                    xmlhttp.onreadystatechange = function () {
                        if ( xmlhttp.status == 200){
                           
                           
                            
                            if(xmlhttp.responseText=="1"){

                            document.getElementById("dg").innerHTML = "开启"
                              }else{

                                document.getElementById("dg").innerHTML = "关闭"
                                     }
                           
                           
                           
                           
                           // document.getElementById("dg").innerHTML = xmlhttp.responseText;
                        }
                    }
                
                    xmlhttp.open("GET", "/sjhq?sjhq=" +"dg");
                    xmlhttp.send();
                }
                function ssssss(){
                var xmlhttp;
                    if (window.XMLHttpRequest) {
                        xmlhttp = new XMLHttpRequest();
                    }
                    xmlhttp.onreadystatechange = function () {
                        if ( xmlhttp.status == 200){
                            
                            if(xmlhttp.responseText=="1"){

                                document.getElementById("wsqk").innerHTML = "今日以喂食"
                                     }else{

                                        document.getElementById("wsqk").innerHTML = "今日未喂食"
                                                }

                            
                            
                            
                            //document.getElementById("wsqk").innerHTML = xmlhttp.responseText;
                        }
                    }
                
                    xmlhttp.open("GET", "/sjhq?sjhq=" +"wsqk");
                    xmlhttp.send();
                }


  function opera(n) {




    var xmlhttp;
 if (window.XMLHttpRequest) {
     xmlhttp = new XMLHttpRequest();
 }
 xmlhttp.onreadystatechange = function () {
 }
 xmlhttp.open("GET", "/sjhq?sjhq="+n );
 xmlhttp.send();
}















 </script>

 
</body>
</html>